<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 页面头部 -->
    <page-header 
      title="SEO分析" 
      subtitle="全面评估网站SEO表现，发现问题并获取优化建议"
    >
      <template #extra>
        <button 
          class="btn btn-primary"
          @click="runAnalysis"
          :loading="analyzing"
        >
          <i v-if="analyzing" class="fa fa-spinner fa-spin mr-1"></i>
          <i v-else class="fa fa-refresh mr-1"></i>
          运行分析
        </button>
      </template>
    </page-header>
    
    <!-- 主要内容区 -->
    <div class="px-4 sm:px-6 lg:px-8 py-6">
      <!-- 分析URL输入 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex flex-col md:flex-row gap-4 items-end">
          <div class="flex-1">
            <label class="block text-sm font-medium text-gray-700 mb-1">
              分析页面URL
            </label>
            <div class="relative">
              <i class="fa fa-link absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              <input
                type="url"
                v-model="analysisUrl"
                placeholder="https://example.com/page-to-analyze"
                class="form-input pl-10 w-full"
              >
            </div>
          </div>
          <div class="w-full md:w-auto">
            <button 
              class="btn btn-primary w-full md:w-auto"
              @click="runAnalysis"
              :loading="analyzing"
            >
              <i v-if="analyzing" class="fa fa-spinner fa-spin mr-1"></i>
              <span>开始分析</span>
            </button>
          </div>
        </div>
        <div class="mt-4 text-sm text-gray-500">
          <i class="fa fa-info-circle text-blue-500 mr-1"></i>
          分析将评估页面的元标签、内容质量、链接结构、移动友好性等SEO因素
        </div>
      </div>
      
      <!-- 分析结果概览 -->
      <div v-if="analysisResult" class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-primary">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500">整体SEO评分</p>
              <h3 class="text-3xl font-bold text-gray-900 mt-1 flex items-center">
                {{ analysisResult.overallScore }}
                <span class="text-lg ml-1">/100</span>
              </h3>
            </div>
            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
              <i class="fa fa-star text-primary text-xl"></i>
            </div>
          </div>
          <div class="mt-4">
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div 
                class="h-2 rounded-full"
                :class="analysisResult.overallScore >= 80 ? 'bg-green-500' : analysisResult.overallScore >= 60 ? 'bg-yellow-500' : 'bg-red-500'"
                :style="{ width: analysisResult.overallScore + '%' }"
              ></div>
            </div>
            <p class="mt-2 text-sm" :class="analysisResult.overallScore >= 80 ? 'text-green-600' : analysisResult.overallScore >= 60 ? 'text-yellow-600' : 'text-red-600'">
              {{ analysisResult.overallScore >= 80 ? '优秀' : analysisResult.overallScore >= 60 ? '良好' : '需要改进' }}
            </p>
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500">优势项</p>
              <h3 class="text-3xl font-bold text-gray-900 mt-1">{{ analysisResult.strengths.length }}</h3>
            </div>
            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
              <i class="fa fa-check text-green-500 text-xl"></i>
            </div>
          </div>
          <div class="mt-4">
            <p class="text-sm text-gray-600">
              页面在这些方面表现良好，建议保持
            </p>
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-500">问题项</p>
              <h3 class="text-3xl font-bold text-gray-900 mt-1">
                {{ analysisResult.issues.critical.length + 
                   analysisResult.issues.important.length + 
                   analysisResult.issues.warning.length }}
              </h3>
            </div>
            <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
              <i class="fa fa-exclamation-triangle text-red-500 text-xl"></i>
            </div>
          </div>
          <div class="mt-4">
            <div class="flex gap-2">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                严重: {{ analysisResult.issues.critical.length }}
              </span>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                重要: {{ analysisResult.issues.important.length }}
              </span>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                警告: {{ analysisResult.issues.warning.length }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分析选项卡 -->
      <div v-if="analysisResult" class="mb-6 border-b border-gray-200">
        <nav class="-mb-px flex flex-wrap" aria-label="Tabs">
          <button
            v-for="tab in analysisTabs"
            :key="tab.id"
            :class="['py-4 px-1 border-b-2 text-sm font-medium', 
              activeAnalysisTab === tab.id 
                ? 'border-primary text-primary' 
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300']"
            @click="activeAnalysisTab = tab.id"
          >
            {{ tab.name }}
            <span v-if="tab.badge" class="ml-1 inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
              {{ tab.badge }}
            </span>
          </button>
        </nav>
      </div>
      
      <!-- 分析结果内容 -->
      <div v-if="analysisResult" class="space-y-6">
        <!-- 元标签分析 -->
        <div v-if="activeAnalysisTab === 'meta-tags'" class="bg-white rounded-lg shadow-md p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">元标签分析</h3>
          
          <div class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h4 class="font-medium text-gray-700 mb-2">标题标签 (Title)</h4>
                <div class="bg-gray-50 p-3 rounded-md border border-gray-200">
                  <p class="font-mono text-sm break-all">{{ analysisResult.metaTags.title || '缺失' }}</p>
                  <div class="mt-2 flex items-center text-xs">
                    <span class="text-gray-500 mr-2">{{ analysisResult.metaTags.titleLength }} 字符</span>
                    <span 
                      :class="analysisResult.metaTags.titleLength > 60 ? 'text-red-500' : 'text-green-500'"
                    >
                      {{ analysisResult.metaTags.titleLength > 60 ? '过长（建议≤60字符）' : '长度合适' }}
                    </span>
                  </div>
                </div>
                <p v-if="analysisResult.issues.metaTitle" class="mt-2 text-sm text-red-600">
                  <i class="fa fa-exclamation-circle mr-1"></i>{{ analysisResult.issues.metaTitle }}
                </p>
              </div>
              
              <div>
                <h4 class="font-medium text-gray-700 mb-2">元描述 (Meta Description)</h4>
                <div class="bg-gray-50 p-3 rounded-md border border-gray-200">
                  <p class="font-mono text-sm break-all">{{ analysisResult.metaTags.description || '缺失' }}</p>
                  <div class="mt-2 flex items-center text-xs">
                    <span class="text-gray-500 mr-2">{{ analysisResult.metaTags.descriptionLength }} 字符</span>
                    <span 
                      :class="analysisResult.metaTags.descriptionLength > 160 || analysisResult.metaTags.descriptionLength === 0 ? 'text-red-500' : 'text-green-500'"
                    >
                      {{ analysisResult.metaTags.descriptionLength === 0 ? '缺失（建议120-160字符）' : analysisResult.metaTags.descriptionLength > 160 ? '过长（建议≤160字符）' : '长度合适' }}
                    </span>
                  </div>
                </div>
                <p v-if="analysisResult.issues.metaDescription" class="mt-2 text-sm text-red-600">
                  <i class="fa fa-exclamation-circle mr-1"></i>{{ analysisResult.issues.metaDescription }}
                </p>
              </div>
            </div>
            
            <div>
              <h4 class="font-medium text-gray-700 mb-2">其他元标签</h4>
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        标签名称
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        内容
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        状态
                      </th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
                        Meta Robots
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500 font-mono">
                        {{ analysisResult.metaTags.robots || '未设置（默认索引）' }}
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                          正常
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
                        Canonical URL
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500 font-mono break-all">
                        {{ analysisResult.metaTags.canonical || '未设置' }}
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap">
                        <span 
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                          :class="analysisResult.metaTags.canonical ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'"
                        >
                          {{ analysisResult.metaTags.canonical ? '已设置' : '建议设置' }}
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
                        视图端口 (Viewport)
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500 font-mono">
                        {{ analysisResult.metaTags.viewport || '未设置' }}
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap">
                        <span 
                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                          :class="analysisResult.metaTags.viewport ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
                        >
                          {{ analysisResult.metaTags.viewport ? '已设置' : '缺失' }}
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 内容分析 -->
        <div v-if="activeAnalysisTab === 'content'" class="bg-white rounded-lg shadow-md p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">内容质量分析</h3>
          
          <div class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">文本长度</h4>
                <p class="text-2xl font-bold text-gray-900">{{ analysisResult.content.wordCount }}</p>
                <p class="text-xs text-gray-500 mt-1">单词数</p>
                <p 
                  class="mt-2 text-xs"
                  :class="analysisResult.content.wordCount > 300 ? 'text-green-600' : 'text-yellow-600'"
                >
                  {{ analysisResult.content.wordCount > 300 ? '内容充实' : '建议增加内容长度' }}
                </p>
              </div>
              
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">标题结构</h4>
                <div class="flex gap-1 mt-1">
                  <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">H1: {{ analysisResult.content.headings.h1 }}</span>
                  <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">H2: {{ analysisResult.content.headings.h2 }}</span>
                  <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">H3: {{ analysisResult.content.headings.h3 }}</span>
                </div>
                <p 
                  class="mt-2 text-xs"
                  :class="analysisResult.content.headings.h1 === 1 ? 'text-green-600' : 'text-red-600'"
                >
                  {{ analysisResult.content.headings.h1 === 1 ? 'H1标签使用正确' : '建议只使用一个H1标签' }}
                </p>
              </div>
              
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">关键词密度</h4>
                <p class="text-2xl font-bold text-gray-900">{{ analysisResult.content.keywordDensity.toFixed(1) }}%</p>
                <p class="text-xs text-gray-500 mt-1">主要关键词占比</p>
                <p 
                  class="mt-2 text-xs"
                  :class="analysisResult.content.keywordDensity >= 1 && analysisResult.content.keywordDensity <= 3 ? 'text-green-600' : 'text-yellow-600'"
                >
                  {{ analysisResult.content.keywordDensity >= 1 && analysisResult.content.keywordDensity <= 3 ? '密度合适' : '建议调整关键词密度（1-3%）' }}
                </p>
              </div>
            </div>
            
            <div>
              <h4 class="font-medium text-gray-700 mb-3">主要关键词使用情况</h4>
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        关键词
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        出现次数
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        密度
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        H1中
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        标题中
                      </th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr v-for="keyword in analysisResult.content.keywords" :key="keyword.text">
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
                        {{ keyword.text }}
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500">
                        {{ keyword.count }}
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500">
                        {{ keyword.density.toFixed(1) }}%
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" :class="keyword.inH1 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'">
                          {{ keyword.inH1 ? '是' : '否' }}
                        </span>
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" :class="keyword.inTitle ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'">
                          {{ keyword.inTitle ? '是' : '否' }}
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <div>
              <h4 class="font-medium text-gray-700 mb-3">内容质量建议</h4>
              <ul class="space-y-2 text-sm text-gray-600">
                <li v-for="(suggestion, index) in analysisResult.content.suggestions" :key="index" class="flex items-start">
                  <i class="fa fa-lightbulb-o text-yellow-500 mt-1 mr-2"></i>
                  <span>{{ suggestion }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 链接分析 -->
        <div v-if="activeAnalysisTab === 'links'" class="bg-white rounded-lg shadow-md p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">链接分析</h3>
          
          <div class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">内部链接</h4>
                <p class="text-2xl font-bold text-gray-900">{{ analysisResult.links.internal.count }}</p>
                <p class="text-xs text-gray-500 mt-1">个链接</p>
                <p class="mt-2 text-xs text-gray-600">
                  {{ analysisResult.links.internal.count > 5 ? '内部链接充足' : '建议增加内部链接' }}
                </p>
              </div>
              
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">外部链接</h4>
                <p class="text-2xl font-bold text-gray-900">{{ analysisResult.links.external.count }}</p>
                <p class="text-xs text-gray-500 mt-1">个链接</p>
                <p class="mt-2 text-xs text-gray-600">
                  {{ analysisResult.links.external.dofollow ? '包含dofollow链接' : '建议添加高质量dofollow链接' }}
                </p>
              </div>
              
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">锚文本多样性</h4>
                <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                  <div 
                    class="h-2 rounded-full bg-purple-500"
                    :style="{ width: analysisResult.links.anchorDiversity + '%' }"
                  ></div>
                </div>
                <p class="text-xs text-gray-500 mt-1">{{ analysisResult.links.anchorDiversity }}%</p>
                <p 
                  class="mt-2 text-xs"
                  :class="analysisResult.links.anchorDiversity >= 60 ? 'text-green-600' : 'text-yellow-600'"
                >
                  {{ analysisResult.links.anchorDiversity >= 60 ? '多样性良好' : '建议增加锚文本多样性' }}
                </p>
              </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h4 class="font-medium text-gray-700 mb-3">内部链接示例</h4>
                <div class="space-y-3 max-h-60 overflow-y-auto pr-2">
                  <div v-for="(link, index) in analysisResult.links.internal.sample" :key="index" class="p-3 bg-gray-50 rounded-md border border-gray-200 text-sm">
                    <p class="font-medium text-gray-900">{{ link.anchor }}</p>
                    <p class="text-gray-500 font-mono text-xs break-all mt-1">{{ link.url }}</p>
                  </div>
                </div>
              </div>
              
              <div>
                <h4 class="font-medium text-gray-700 mb-3">外部链接示例</h4>
                <div class="space-y-3 max-h-60 overflow-y-auto pr-2">
                  <div v-for="(link, index) in analysisResult.links.external.sample" :key="index" class="p-3 bg-gray-50 rounded-md border border-gray-200 text-sm">
                    <p class="font-medium text-gray-900">{{ link.anchor }}</p>
                    <p class="text-gray-500 font-mono text-xs break-all mt-1">{{ link.url }}</p>
                    <p class="mt-1 text-xs">
                      <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
                        {{ link.follow ? 'dofollow' : 'nofollow' }}
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            
            <div>
              <h4 class="font-medium text-gray-700 mb-3">链接问题</h4>
              <div v-if="analysisResult.links.issues.length === 0" class="p-4 bg-green-50 rounded-md border border-green-200 text-sm text-green-700">
                <i class="fa fa-check-circle mr-1"></i>未发现链接问题
              </div>
              <ul v-else class="space-y-3">
                <li v-for="(issue, index) in analysisResult.links.issues" :key="index" class="p-3 bg-red-50 rounded-md border border-red-200 text-sm">
                  <p class="font-medium text-red-800 flex items-center">
                    <i class="fa fa-exclamation-circle mr-1"></i>{{ issue.title }}
                  </p>
                  <p class="text-red-700 mt-1">{{ issue.description }}</p>
                  <p class="text-red-700 mt-2 font-medium">受影响链接: {{ issue.count }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 技术分析 -->
        <div v-if="activeAnalysisTab === 'technical'" class="bg-white rounded-lg shadow-md p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">技术SEO分析</h3>
          
          <div class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">页面加载速度</h4>
                <p class="text-2xl font-bold text-gray-900">{{ analysisResult.technical.loadTime }}s</p>
                <p class="text-xs text-gray-500 mt-1">加载时间</p>
                <p 
                  class="mt-2 text-xs"
                  :class="analysisResult.technical.loadTime < 3 ? 'text-green-600' : analysisResult.technical.loadTime < 5 ? 'text-yellow-600' : 'text-red-600'"
                >
                  {{ analysisResult.technical.loadTime < 3 ? '优秀' : analysisResult.technical.loadTime < 5 ? '良好' : '需要优化' }}
                </p>
              </div>
              
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">移动友好性</h4>
                <div class="flex items-center justify-center h-10">
                  <i 
                    class="text-2xl"
                    :class="analysisResult.technical.mobileFriendly ? 'fa fa-check-circle text-green-500' : 'fa fa-times-circle text-red-500'"
                  ></i>
                </div>
                <p 
                  class="mt-2 text-xs text-center"
                  :class="analysisResult.technical.mobileFriendly ? 'text-green-600' : 'text-red-600'"
                >
                  {{ analysisResult.technical.mobileFriendly ? '移动友好' : '不适合移动设备' }}
                </p>
              </div>
              
              <div class="bg-gray-50 p-4 rounded-md border border-gray-200">
                <h4 class="text-sm font-medium text-gray-500 mb-1">HTTPS状态</h4>
                <div class="flex items-center justify-center h-10">
                  <i 
                    class="text-2xl"
                    :class="analysisResult.technical.https ? 'fa fa-lock text-green-500' : 'fa fa-unlock text-red-500'"
                  ></i>
                </div>
                <p 
                  class="mt-2 text-xs text-center"
                  :class="analysisResult.technical.https ? 'text-green-600' : 'text-red-600'"
                >
                  {{ analysisResult.technical.https ? '已启用HTTPS' : '未启用HTTPS' }}
                </p>
              </div>
            </div>
            
            <div>
              <h4 class="font-medium text-gray-700 mb-3">技术状态检查</h4>
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        检查项
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        状态
                      </th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        说明
                      </th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr v-for="check in analysisResult.technical.checks" :key="check.id">
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
                        {{ check.name }}
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" 
                          :class="check.status === 'pass' ? 'bg-green-100 text-green-800' : 
                                  check.status === 'warning' ? 'bg-yellow-100 text-yellow-800' : 
                                  'bg-red-100 text-red-800'">
                          {{ check.status === 'pass' ? '通过' : check.status === 'warning' ? '警告' : '失败' }}
                        </span>
                      </td>
                      <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500">
                        {{ check.description }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <div>
              <h4 class="font-medium text-gray-700 mb-3">优化建议</h4>
              <ul class="space-y-3">
                <li v-for="(suggestion, index) in analysisResult.technical.suggestions" :key="index" class="p-3 bg-blue-50 rounded-md border border-blue-200">
                  <h5 class="font-medium text-blue-800 text-sm flex items-center">
                    <i class="fa fa-lightbulb-o mr-1"></i>{{ suggestion.title }}
                  </h5>
                  <p class="text-blue-700 text-sm mt-1">{{ suggestion.description }}</p>
                  <p class="text-blue-700 text-xs mt-2">
                    <span class="font-medium">预期改进:</span> {{ suggestion.improvement }}
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 问题与建议 -->
        <div v-if="activeAnalysisTab === 'issues'" class="bg-white rounded-lg shadow-md p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">问题与优化建议</h3>
          
          <div class="space-y-6">
            <div v-if="analysisResult.issues.critical.length > 0">
              <h4 class="font-medium text-gray-700 mb-3 flex items-center">
                <i class="fa fa-exclamation-circle text-red-500 mr-2"></i>严重问题
                <span class="ml-2 text-sm font-normal text-gray-500">(影响SEO表现，需要立即解决)</span>
              </h4>
              <div class="space-y-3">
                <div v-for="(issue, index) in analysisResult.issues.critical" :key="index" class="p-4 bg-red-50 rounded-md border border-red-200">
                  <h5 class="font-medium text-red-800 text-sm">{{ issue.title }}</h5>
                  <p class="text-red-700 text-sm mt-1">{{ issue.description }}</p>
                  <div class="mt-3">
                    <p class="text-xs font-medium text-red-800 mb-1">解决建议:</p>
                    <p class="text-red-700 text-sm">{{ issue.solution }}</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-if="analysisResult.issues.important.length > 0">
              <h4 class="font-medium text-gray-700 mb-3 flex items-center">
                <i class="fa fa-exclamation-triangle text-orange-500 mr-2"></i>重要问题
                <span class="ml-2 text-sm font-normal text-gray-500">(对SEO有显著影响，建议尽快解决)</span>
              </h4>
              <div class="space-y-3">
                <div v-for="(issue, index) in analysisResult.issues.important" :key="index" class="p-4 bg-orange-50 rounded-md border border-orange-200">
                  <h5 class="font-medium text-orange-800 text-sm">{{ issue.title }}</h5>
                  <p class="text-orange-700 text-sm mt-1">{{ issue.description }}</p>
                  <div class="mt-3">
                    <p class="text-xs font-medium text-orange-800 mb-1">解决建议:</p>
                    <p class="text-orange-700 text-sm">{{ issue.solution }}</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-if="analysisResult.issues.warning.length > 0">
              <h4 class="font-medium text-gray-700 mb-3 flex items-center">
                <i class="fa fa-info-circle text-yellow-500 mr-2"></i>警告
                <span class="ml-2 text-sm font-normal text-gray-500">(对SEO有一定影响，建议优化)</span>
              </h4>
              <div class="space-y-3">
                <div v-for="(issue, index) in analysisResult.issues.warning" :key="index" class="p-4 bg-yellow-50 rounded-md border border-yellow-200">
                  <h5 class="font-medium text-yellow-800 text-sm">{{ issue.title }}</h5>
                  <p class="text-yellow-700 text-sm mt-1">{{ issue.description }}</p>
                  <div class="mt-3">
                    <p class="text-xs font-medium text-yellow-800 mb-1">优化建议:</p>
                    <p class="text-yellow-700 text-sm">{{ issue.solution }}</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div>
              <h4 class="font-medium text-gray-700 mb-3 flex items-center">
                <i class="fa fa-check-circle text-green-500 mr-2"></i>优势分析
                <span class="ml-2 text-sm font-normal text-gray-500">(这些方面表现良好，建议保持)</span>
              </h4>
              <div class="space-y-3">
                <div v-for="(strength, index) in analysisResult.strengths" :key="index" class="p-4 bg-green-50 rounded-md border border-green-200">
                  <h5 class="font-medium text-green-800 text-sm">{{ strength.title }}</h5>
                  <p class="text-green-700 text-sm mt-1">{{ strength.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分析结果为空状态 -->
      <div v-if="!analysisResult" class="bg-white rounded-lg shadow-md p-8 text-center">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-bar-chart text-gray-400 text-2xl"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">尚未进行SEO分析</h3>
        <p class="text-gray-500 max-w-md mx-auto mb-6">
          输入页面URL并点击"开始分析"按钮，系统将对页面进行全面的SEO评估并提供优化建议
        </p>
        <button 
          class="btn btn-primary"
          @click="runAnalysis"
          :loading="analyzing"
        >
          <i v-if="analyzing" class="fa fa-spinner fa-spin mr-1"></i>
          <span>开始首次分析</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { Chart, registerables } from 'chart.js'
import { analyzePageSeo } from '@/api/seo'

// 注册Chart.js组件
Chart.register(...registerables)

// 状态变量
const analysisUrl = ref('https://example.com')
const analyzing = ref(false)
const analysisResult = ref(null)
const activeAnalysisTab = ref('meta-tags')

// 分析选项卡
const analysisTabs = computed(() => [
  { id: 'meta-tags', name: '元标签分析' },
  { id: 'content', name: '内容分析' },
  { id: 'links', name: '链接分析' },
  { id: 'technical', name: '技术分析' },
  { 
    id: 'issues', 
    name: '问题与建议', 
    badge: analysisResult.value ? 
      analysisResult.value.issues.critical.length + 
      analysisResult.value.issues.important.length + 
      analysisResult.value.issues.warning.length : 0
  }
])

// 运行SEO分析
const runAnalysis = async () => {
  // 简单验证URL
  if (!analysisUrl.value.startsWith('http://') && !analysisUrl.value.startsWith('https://')) {
    analysisUrl.value = 'https://' + analysisUrl.value
  }
  
  analyzing.value = true
  try {
    const response = await analyzePageSeo(analysisUrl.value)
    analysisResult.value = response.data
    // 默认显示问题与建议标签（如果有问题）
    if (analysisResult.value.issues.critical.length > 0) {
      activeAnalysisTab.value = 'issues'
    }
  } catch (error) {
    console.error('SEO分析失败:', error)
    alert('分析失败: ' + (error.message || '无法连接到分析服务，请稍后重试'))
  } finally {
    analyzing.value = false
  }
}

// 页面加载时，如果有最近的分析结果，自动加载
onMounted(async () => {
  // 在实际应用中，这里可以从API获取最近的分析结果
  // 这里仅作为示例，不执行实际请求
})
</script>
